
<template>
  <div class="footerNavs" v-show="$route.meta.navShow"
  :class="$route.meta.navShow ? 'container-bot': ''">
      <router-link class="rlink" to="/Home">
      <i></i>
      <span>首页</span>
      </router-link>

      <router-link class="rlink" to="/Find">
      <i></i>
      <span>发现</span>
      </router-link>

      <router-link class="rlink" to="/ShoppingCart">
      <i></i>
      <span>购物车</span>
      </router-link>

      <router-link class="rlink" to="/Order">
      <i></i>
      <span>订单</span>
      </router-link>

      <router-link class="rlink" to="/Mine">
      <i></i>
      <span>我的</span>
      </router-link>

  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
  .footerNavs{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    // 首页
    >.rlink:nth-child(1) {
      text-decoration: none;
      >i{
        display: block;
        width: 24px;
        height: 30px;
        background: url(../../public/uploads/button.png) 0 0;
        background-size: 100%;
        background-position: center 0;
        margin: 0 auto;
      }
      >span{
        display: block;
        height: 20px;
        width: 24px;
        font-size: 12px;
        color: #555;
      }
    }
    >.router-link-active:nth-child(1){
      >i{
        display: block;
        width: 24px;
        height: 30px;
        background: url(../../public/uploads/button.png) 0 0;
        background-size: 100%;
        background-position: center -50px;
        margin: 0 auto;
      }
      >span{
        display: block;
        height: 20px;
        width: 24px;
        font-size: 12px;
        color: #39ac69;
      }
    }
    // 发现
    >.rlink:nth-child(2) {
      text-decoration: none;
      >i{
        display: block;
        width: 24px;
        height: 30px;
        background: url(../../public/uploads/button.png) 0 0;
        background-size: 100%;
        background-position: center -1300px;
        margin: 0 auto;
      }
      >span{
        display: block;
        height: 20px;
        width: 24px;
        font-size: 12px;
        color: #555;
      }
    }
    >.router-link-active:nth-child(2){
      >i{
        display: block;
        width: 24px;
        height: 30px;
        background: url(../../public/uploads/button.png) 0 0;
        background-size: 100%;
        background-position: center -1350px;
        margin: 0 auto;
      }
      >span{
        display: block;
        height: 20px;
        width: 24px;
        font-size: 12px;
        color: #39ac69;
      }
    }
    // 购物车
    >.rlink:nth-child(3) {
      text-decoration: none;
      >i{
        display: block;
        width: 24px;
        height: 30px;
        background: url(../../public/uploads/button.png) 0 0;
        background-size: 100%;
        background-position: center -100px;
        margin: 0 auto;
      }
      >span{
        display: block;
        height: 20px;
        width: 36px;
        font-size: 12px;
        color: #555;
      }
    }
    >.router-link-active:nth-child(3){
      >i{
        display: block;
        width: 24px;
        height: 30px;
        background: url(../../public/uploads/button.png) 0 0;
        background-size: 100%;
        background-position: center -150px;
        margin: 0 auto;
      }
      >span{
        display: block;
        height: 20px;
        width: 36px;
        font-size: 12px;
        color: #39ac69;
      }
    }
    // 订单
    >.rlink:nth-child(4) {
      text-decoration: none;
      >i{
        display: block;
        width: 24px;
        height: 30px;
        background: url(../../public/uploads/button.png) 0 0;
        background-size: 100%;
        background-position: center -200px;
        margin: 0 auto;
      }
      >span{
        display: block;
        height: 20px;
        width: 24px;
        font-size: 12px;
        color: #555;
      }
    }
    >.router-link-active:nth-child(4){
      >i{
        display: block;
        width: 24px;
        height: 30px;
        background: url(../../public/uploads/button.png) 0 0;
        background-size: 100%;
        background-position: center -250px;
        margin: 0 auto;
      }
      >span{
        display: block;
        height: 20px;
        width: 24px;
        font-size: 12px;
        color: #39ac69;
      }
    }
    // 我的
    >.rlink:nth-child(5) {
      text-decoration: none;
      >i{
        display: block;
        width: 24px;
        height: 30px;
        background: url(../../public/uploads/button.png) 0 0;
        background-size: 100%;
        background-position: center -300px;
        margin: 0 auto;
      }
      >span{
        display: block;
        height: 20px;
        width: 24px;
        font-size: 12px;
        color: #555;
      }
    }
    >.router-link-active:nth-child(5){
      >i{
        display: block;
        width: 24px;
        height: 30px;
        background: url(../../public/uploads/button.png) 0 0;
        background-size: 100%;
        background-position: center -350px;
        margin: 0 auto;
      }
      >span{
        display: block;
        height: 20px;
        width: 24px;
        font-size: 12px;
        color: #39ac69;
      }
    }
  }
</style>
